<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>文章添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <!--Editor.md-->
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script>
        $(function () {
            setInterval(function () {

                $.get("[[@{/file/findAllJSON}]]", function (res) {

                    //遍历
                    $.each(res, function (index, file) {
                        console.log(file)
                        $("#" + file.id).text(file.downcounts)//异步刷新下载次数
                    })
                })
            }, 2000) //间隔2s运行一次
        });
    </script>
</head>

<body style="background-color: pink">
<h1>欢迎：<span th:if="${session.user!=null}" th:text="${session.user.username}"></span></h1>
<h3>文件列表：</h3>
<table border="1px">
    <tr>
        <td>序号</td>
        <td>文件原始名称</td>
        <td>文件的新名称</td>
        <td>文件的后缀</td>
        <td>存储路径</td>
        <td>文件大小</td>
        <td>类型</td>
        <td>是否是图片</td>
        <td>下载次数</td>
        <td>上传时间</td>
        <td>操作</td>
    </tr>
    <tr th:each="file,fileStat:${files}">
        <th><span th:text="${file.id}"></span></th>
        <th><span th:text="${file.oldFilename}"></span></th>
        <th><span th:text="${file.newFilename}"></span></th>
        <th><span th:text="${file.ext}"></span></th>
        <th><span th:text="${file.path}"></span></th>
        <th><span th:text="${file.size}"></span></th>
        <th><span th:text="${file.type}"></span></th>
        <th>
            <img th:if="${file.isimg=='是'}" style="width: 100px;height: 100px"
                 th:src="${#servletContext.contextPath}+${file.path}+'/'+${file.newFilename}">
            <span th:if="${file.isimg=='否'}" th:text="${file.isimg}"></span>
        </th>
        <th th:id="${file.id}"><span th:text="${file.downcounts}"></span></th>
        <th><span th:text="${#dates.format(file.uploadTime,'yyyy-MM-dd HH:mm:ss')}"></span></th>
        <th>
            <a th:href="@{/file/download(id=${file.id})}">下载</a>
            <a th:href="@{/file/openinline(id=${file.id})}">在线打开</a>
            <a th:href="@{/file/delete(id=${file.id})}">删除</a>
        </th>
    </tr>
</table>
<hr>
<h3>上传文件</h3>
<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
    <input type="file" name="newfile"><input type="submit" value="上传文件">
</form>
<br>
<br>
<br>
<br>
<hr>
<div>
    <div>
        <div>
            <!--博客表单-->
            <form name="mdEditorForm">
                <div>
                    标题：<input type="text" name="title">
                </div>
                <div>
                    作者：<input type="text" name="author">
                </div>
                <div>
                    分类：
                    <select name="type">
                        <option value="1">学院新闻</option>
                        <option value="2">学院公告</option>
                        <option value="3">规章制度</option>
                    </select>
                </div>
                <div>
                    选择该文章需要的附件序号：<input type="text" name="fileId">
                </div>
                <label>文章内容：</label>
                <div id="article-content">
                    <textarea name="content" id="content" style="display:none;"> </textarea>
                </div>
            </form>

        </div>
    </div>
</div>
</body>

<!--editormd-->
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>

<script type="text/javascript">
    var testEditor;

    //window.onload = function(){ }
    $(function () {

        testEditor = editormd("article-content", {
            width: "90%",	//宽
            height: 600,	//高
            syncScrolling: "single",
            path: "../editormd/lib/",	//加载编辑器lib路径
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            emoji: true,		//功能开启表情
            theme: (localStorage.theme) ? localStorage.theme : "xq-light",//工具栏主题
            previewTheme: (localStorage.previewTheme) ? localStorage.previewTheme : "xq-light",//预览主题
            editorTheme: (localStorage.editorTheme) ? localStorage.editorTheme : "xq-light",//编辑主题
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/dianqi/file/articleImg/upload",// 上传图片时的访问地址
            onload: function () {
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons: function () {
                return ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text",
                    "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                    "help", "info", "releaseIcon", "index"]
            },

            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts: {
                releaseIcon: "<span bgcolor=\"red\">发布</span>",
                index: "<span bgcolor=\"red\">返回首页</span>",
            },

            /*给自定义按钮指定回调函数*/
            toolbarHandlers: {
                releaseIcon: function (cm, icon, cursor, selection) {
                    //表单提交
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/dianqi/admin/addArticle";//提交至服务器的路径
                    mdEditorForm.submit();
                },
                index: function () {
                    window.location.href = '/';
                },
            }
        });
    });
</script>

</html>